<template>
  <div>
    <router-link to="/update">新增</router-link>
    <table border="1">
      <tr>
        <th>id</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in product">
        <td>{{item.id}}</td>
        <td>{{item.productName}}</td>
        <td>{{item.price}}</td>
        <td>{{item.createTime}}</td>
        <td>
          <button @click="del(item.id)">删除</button>
          <button @click="update(item)">修改</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>

  export default {
    name: "product",
    data() {
      return {
        product: []
      }
    },
    methods: {
      findAll: function () {
        // this.product=[{id:1,productName:"橘子",price:"10",createTime:"2021-10-02"},
        //   {id:2,productName:"香蕉",price:"20",createTime:"2021-10-02"}]
        this.$axios.get("/product/findAll").then(res => {
          this.product = res.data;
        })
      },
      del: function (id) {
        this.$axios.get("/product/deleteById?id=" + id).then(res => {
          this.findAll()
        })
      },
      update: function (item) {
        this.$router.push({name: "update", params: {"update": item}})
      }
    },
    mounted() {
      this.findAll();
    }
  }
</script>

<style scoped>

</style>
